<template>
    <div class="box">
        <header style="color:white"> 1</header>
        <div class="img"><img src="img/logo@2x.png" alt=""></div>
        <!-- <div class="title">请输入账号</div> -->
        <div class="names">
            <div class="name"><img src="img/yonghuming@2x.png" alt=""><input placeholder="请输入账号" v-model="list.username" type="text"></div>
            <div class="name"><img src="img/mima@2x.png" alt=""><input placeholder="请输入密码" v-model="list.password" type="password"><img class="imgs" style="width:0.28rem;height:0.13rem" src="img/biyan@2x.png" alt=""></div>
        </div>
        <footer>
            <van-button @click="login" style="width:5rem;border-radius: 0.1rem;" type="info">登录</van-button>
        </footer>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
            list:{
            username:'',
            password:''
            }
           
        }
    },
    methods: {
        login(){
             let ras = this.$getRsaCode(JSON.stringify(this.list));
                const run = (async ()=>{
                let data = await this.get('/user/userLogin',{youCanYouGo:ras});
                if(data.code == 200){
                    localStorage.setItem('token',data.data.token);
                    localStorage.setItem('id',data.data.userId);
                    localStorage.setItem('name',JSON.stringify(data.data.userRoles) );
                    let role = data.data.userRoles;
                    if(role.some(item =>item.roleName === '超级管理员' || item.roleName === '课程权限分配管理员')){
                        localStorage.setItem('role',true);
                    }
                    this.Toast({
                        type:'success',
                        message:'登录成功',
                        duration:1000,
                        onClose:()=>{
                            this.$router.push('/dashborad/home');
                        }
                    }) 
                }else {
                    this.Toast.fail(data.msg);
                }
                
            })();
            }
    },
}
</script>
<style lang="scss" scoped>
    header{
        margin-top: 0.3rem;
        font-size: 0.32rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: #272727;
        width: 100%;
        text-align: center;
    }
    .img{
        margin-top: 1.25rem;
        text-align: center;
        img{
            width: 1.36rem;
            height: 1.36rem;
        }
    }
    .title{
        margin-top: 0.5rem;
        font-size: 0.26rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #A4A4A4;
        margin-left: 1.8rem;
    }
    .names{
        padding:0 1.2rem;
        margin-top: 1rem;
    }
    .name{
        padding-bottom: 0.22rem;
        box-sizing: border-box;
        margin-top: 0.4rem;
        display: flex;
        align-items: center;
        border-bottom: 0.01rem solid #eee;
        position: relative;
        .imgs{
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        img{
            width: 0.3rem;
            height: 0.35rem;
        }
        input{
            margin-left: 0.3rem;
            height: 0.4rem;
            border: none;
            font-size: 0.26rem;
        }
    }
    footer{
        margin-top: 1.2rem;
        text-align: center;
    }
</style>